<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.事件的绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				事件的绑定：
					1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名，原生有的DOM事件都可以写；
					2.事件的回调函数需要配置在methods中；
					3.methdos中的函数最终也会出现在vm上（但不存在数据代理了，是直接放在vm上的）；
					4.methods中配置的函数，是Vue所管理的函数，所以务必要写成普通函数；
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
			<!-- 使用v-on绑定（标准写法） -->
			<!-- <button v-on:click="welcome">点我欢迎新同学</button> -->

			<!-- 使用???绑定（简写形式） -->
			<button @click="welcome">点我欢迎新同学</button>
			
		</div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#demo',
			data:{
				name:'尚硅谷',
				address:'宏福科技园',
				city:'北京',
				tel:'010-56253825'
			},
			methods:{
				welcome(){
					alert(`欢迎来学习！,学校所在城市:${this.city}，联系电话${this.tel}`)
				}
			}
		})
		console.log(vm)
		
	</script>
</html>